
<template>
  <div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>组织中心</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          <el-breadcrumb-item>标签列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <!--新增编辑界面-->
      <el-dialog
        class="el-dialog-style"
        :title="operation?'新增':'编辑'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
      >
        <el-form
          :model="dataForm"
          label-width="130px"
          ref="dataForm"
          :size="size"
          :rules="dataFormRules"
          label-position="center"
          style="text-align:center"
          inline>
          <el-row class="searchDialog-input">
            <el-form-item label="ID：" prop="id" v-if="false" >
              <el-input  v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="ID"></el-input>
            </el-form-item>
            <el-form-item label="分类：" prop="categoryId" class="mb30">
              <el-select  v-model="dataForm.categoryId" placeholder="分类">
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item  label="标签名称：" prop="tagName">
              <el-input
                v-model.trim="dataForm.tagName"
                auto-complete="off"
                show-word-limit
                placeholder="标签名称"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
          <el-button :size="size" @click.native="dialogVisible = false" plain type="primary">{{$t('action.cancel')}}</el-button>
          <el-button
            :size="size"
            type="primary"
            @click.native="submitForm"
            :loading="editLoading"
          >{{$t('action.submit')}}</el-button>
        </div>
      </el-dialog>
    </div>

    <!--表格内容栏-->
    <Jic-table
      :height="350"
      :operationWidth="220"
      :tableList="pageResult"
      :tableHeaderList="filterColumns"
      @findPage="findPage"
      :showIndex="false"
      :showBatchDelete="false"
      :showDeleteOperation="true"
      :totalSize="totalSize"
      :showEditOperation="true"
      :showSelection="false"
      @handleEdit="handleEdit"
      @handlePageChange="handlePageChange"
      @handleSizeChange="handleSizeChange"
      @handleDelete="handleDelete"
      ref="JicTable"
      :sortable="false"
    ></Jic-table>
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import JicTable from "@/components/jicComponentGallery/jicTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import XLSX from "xlsx";
import axios from "axios";
export default {
  components: {
    PopupTreeInput,
    JicTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      list: [], //标签分类
      filters: {},
      totalSize: 0,
      size: "small",
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: [],
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      printPage: false,
      dataForm: {},
      //输入框非空验证
      dataFormRules: {
        categoryId: [
          { required: true, message: "请选择标签分类", trigger: "blur" }
        ],
        tagName: [
          { required: true, message: "请输入标签分类名称", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.limit != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }

      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this_.utils.request.getTagList(this_.filters, function(res) {
        this_.pageResult = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },

    //左右分页点击
    handlePageChange(params) {
      if (params != null && params.number != null) {
        if (params.number != null) {
          this.pageRequest.pageNum = params.number;
        }

        this.findPage();
      }
    },

    //切换条数变化事件
    handleSizeChange(params) {
      console.log(params, "/////");
      if (params != null && params.size != null) {
        this.pageRequest.pageSize = params.size;
      }
      this.findPage();
    },

    // 批量删除
    handleDelete: function(data) {
      let params = {};
      params.id = data.row.id;

      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          let this_ = this;
          this.utils.request.delTagInfo(params, function(res) {
            if (res.code == "0000") {
              this_.$message({ message: "删除成功", type: "success" });
              this_.findPage();
            } else {
              if (res.code == "7777") {
                this_.$message({
                  message: "已有页面关联此标签无法删除",
                  type: "error"
                });
                this_.findPage();
              }
            }
          });
        })
        .catch(() => {});
    },
    // 显示新增界面
    handleAdd: function() {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate();
      }
      if (this.list == null) {
        this.$message({ message: "分类查询失败，请刷新页面", type: "error" });
        this.dialogVisible = false;
      }
      this.isOperat = false;

      this.dialogVisible = true;
      this.operation = true;
      this.dataForm.id = "";
      this.dataForm = {};
    },
    // 显示编辑界面
    handleEdit: function(params) {
      if (this.$refs["dataForm"]) {
        this.$refs["dataForm"].clearValidate();
      }
      console.log(params);
      this.dialogVisible = true;
      this.operation = false;
      var this_ = this;
      this.$nextTick(function() {
        this_.dataForm = Object.assign({}, params.row);
      });
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          let this_ = this;
          if (this_.dataForm.tagName.length < 3) {
            this_.$message({
              message: "请输入三个以上三十个以下的字符",
              type: "error"
            });
          } else {
            if (this.dataForm.id != null) {
              let this_ = this;
              this.editLoading = true;
              let params = Object.assign({}, this.dataForm);
              console.log(this.dataForm.id);
              this.utils.request.editTag(params, this.editInfoBack);
            } else {
              let params = Object.assign({}, this.dataForm);
              console.log(this.dataForm.id);
              this.utils.request.addTag(params, this.editInfoBack);
            }
          }
        }
      });
    }, // 新增修改回调
    editInfoBack: function(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        if (data.code == "8888") {
          this.$message({
            message: "此标签名已被使用,请重新输入",
            type: "error"
          });
        }
        if (data.code == "7777") {
          this.$message({
            message: "已有表关联此标签，无法编辑",
            type: "error"
          });
        } else {
          this.$message({ message: "操作失败", type: "error" });
        }
      }
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "id", label: "ID", minWidth: 50 },
        { prop: "categoryName", label: "分类", minWidth: 120 },
        { prop: "tagName", label: "标签名称", minWidth: 120 },
        {
          prop: "creatorName",
          label: "创建人",
          minWidth: 120
        },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 120
        }
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //标签类型初始化
    queryTagCategoryList() {
      var that = this;
      this.utils.request.getTagCategoryList({}, function(data) {
        that.list = data.data.rows;
      });
    }
  },
  mounted() {
    this.findPage();
    this.initColumns();
    this.queryTagCategoryList();
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/css/public.scss';
/deep/ .el-input__inner  {
       width: 200px;
}
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
 .search-button{
	 margin: 20px 0px 0px;
   padding-bottom: 20px;
   .el-form-item{
    margin-bottom: 0px !important;
  }
}
</style>
